<template>
  <div class="player" v-show="playList.length>0">
    <!-- 全屏播放 -->
  <transition
    name="normal"
    @enter="enter"
    @after-enter="afterEnter"
    @leave="leave"
    @after-leave="afterLeave"
  >
    <div class="normal-player" v-show="fullScreen">
      <!-- 背景层 -->
      <div class="background">
        <img width=100% height=100% :src="currentSong.image">
        </div>
      <!-- 顶部 -->
      <div class="top">
        <div class="back">
          <i class="icon-back" @click="back"></i>
        </div>
         <h1 class="title" v-html="currentSong.songname"></h1>
         <h2 class="singer-name" v-html="currentSong.singer"></h2>
      </div>
      <!-- 中间唱片 -->
      <div class="middle">
        <div class="middle-l" ref="middleL">
          <div class="cd-wrapper" ref="cdWrapper">
            <div class="cd" :class="cdCls">
              <img  class="singer-img" :src="currentSong.image">
            </div>
          </div>
          <!-- 歌词 -->
          <div class="playing-lyric-wrapper">
            <div class="playing-lyric">{{ playingLyric }}</div>
          </div>
        </div>
        <div class="middle-r" ref="lyricList">
          <div class="lyric-wrapper">
            <div v-if="currentLyric">
              <p class="text">
              </p>
            </div>
          </div>
        </div>
      </div>
      <!-- 底部 -->
      <div class="bottom">
        <div class="dot-wrapper">
          <span class="dot" :class="{'active': currentShow === 'cd'}"></span>
          <span class="dot" :class="{'active': currentShow === 'lyric'}"></span>
        </div>
        <!-- 进度条 -->
        <div class="process-wrapper">
          <span class="time time-l"></span>
          <div class="process-bar-wrapper">
          </div>
          <span class="time time-r"></span>
        </div>
        <!-- 操作按钮 -->
        <div class="operators">
          <div class="icon i-left" @click="changeMode">
            <i class="icon-sequence"></i>
          </div>
          <div class="icon i-left" :class="disableCls">
            <i class="icon-prev" @click="prev"></i>
          </div>
          <div class="icon i-center" :class="disableCls">
            <i :class="playIcon" @click="togglePlaying"></i>
          </div>
          <div class="icon i-right" :class="disableCls">
            <i class="icon-next" @click="next"></i>
          </div>
          <div calss="icon i-right">
            <i class="icon-favorite"></i>
          </div>
        </div>
      </div>
    </div>
   </transition>
   <transition name="mini">
    <div class="mini-player" v-show="!fullScreen" @click="open">
      <div class="icon">
        <img :src="currentSong.image" width="40px" height="40px" :class="cdCls">
      </div>
      <div class="text">
        <h2 class="name" v-html="currentSong.songname"></h2>
        <p class="desc" v-html="currentSong.singer"></p>
      </div>
      <div class="control">
        <i class="icon-mini" :class="miniIcon"></i>
      </div>
      <div class="control" @click.stop.prevent="showPlaylist">
        <i class="icon-playlist"></i>
      </div>
    </div>
    </transition>
    <audio ref="audio" :src="currentSong.url" />
  </div>
</template>

<script>
import { mapGetters, mapMutations, mapActions } from 'vuex'
import animations from 'create-keyframe-animation'
import { playMode } from '../../assets/js/playMode'
import { playerMixin } from '../../assets/js/mixin'
import { prefixStyle } from '../../assets/js/dom'
// import Lyric from 'lyric-parser'
// import scroll from './scroll/Scroll'
// import PlayList from './playlist/PlayList'

const transform = prefixStyle('transform')
const transitionDuration = prefixStyle('transitionDuration')
export default {
  mixin: [playerMixin],
  name: 'player',
  data () {
    return {
      songReady: false,
      currentTime: 0,
      radius: 32,
      currentLyric: null,
      currentLineNum: 0,
      currentShow: 'cd',
      playingLyric: ''
    }
  },
  computed: {
    cdCls () {
      return this.playingState ? 'play' : 'play pause'
    },
    playIcon () {
      return this.playingState ? 'icon-pause' : 'icon-play'
    },
    miniIcon () {
      return this.playingState ? 'icon-pause-mini' : 'icon-play-mini'
    },
    disableCls () {
      return this.songReady ? '' : 'disable'
    },
    percent () {
      return this.currentTime / this.currentSong.duration
    },
    ...mapGetters([
      'playingState',
      'fullScreen',
      'currentIndex',
      'playList',
      'currentSong'
    ])
  },
  created () {
    this.touch = {}
  },
  components: {
    // PlayList
  },
  methods: {
    back () {
      this.setFullScreen(false)
    },
    open () {
      this.setFullScreen(true)
    },
    // 事件钩子，创建成CSS3动画
    enter (el, done) {
      const { x, y, scale } = this._getPosAndScale()
      let animation = {
        0: {
          transform: `translate3d(${x}px, ${y}px, 0) scale(${scale})`
        },
        60: {
          transform: `translate3d(0,0,0) scale(1.1)`
        },
        100: {
          transform: `translate3d(0,0,0) scale(1)`
        }
      }
      animations.registerAnimation({
        name: 'move',
        animation,
        presets: {
          duration: 400,
          easing: 'linear'
        }
      })
      animations.runAnimation(this.$refs.cdWrpper, 'move', done)
    },
    afterEnter () {
      animations.unregisterAnimation('move')
      this.$refs.cdWrapper.style.animation = ''
    },
    leave (el, done) {
      this.$refs.cdWrapper.style.transition = 'all 0.4s'
      const { x, y, scale } = this._getPosAndScale()
      this.$refs.cdWrapper.style[transform] = `translate3d(${x}px,${y}px,0) scale(${scale})`
      this.$refs.cdWrapper.addEventListener('transitionend', done)
    },
    afterLeave () {
      this.$refs.cdWrapper.style.transition = ''
      this.$refs.cdWrapper.style[transform] = ''
    },
    middleTouchStart () {

    },
    middleTouchMove () {

    },
    middleTouchEnd () {

    },
    changeMode () {

    },
    prev () {

    },
    togglePlaying () {
      this.setPlayingState(!this.playingState)
    },
    next () {

    },
    toggleFavorite () {

    },
    showPlaylist () {
      this.$refs.playlist.show()
    },
    _getPosAndScale () {
      const targetWidth = 40 // mini-player icon宽度
      const width = window.innerWidth * 0.8 // cd-wrapper宽度
      const paddingLeft = 40
      const paddingTop = 80
      const paddingBottom = 30 // mini-player icon中心距底部位置
      const scale = targetWidth / width
      const x = -(window.innerWidth / 2 - paddingLeft) // X轴方向移动的距离
      const y = window.innerHeight - paddingTop - width / 2 - paddingBottom
      return {
        x,
        y,
        scale
      }
    },
    ...mapMutations({
      setFullScreen: 'SET_FULL_SCREEN',
      setPlayingState: 'SET_PLAYING_STATE'
    })
  },
  watch: {
    currentSong () {
      this.nextTick(() => {
        this.$refs.audio.play()
      })
    },
    playingState (newPlaying) {
      const audio = this.$refs.audio
      this.nextTick(() => {
        newPlaying ? audio.play() : audio.pause()
      })
    }
  }
}

</script>
<style lang='stylus' scoped>
@import '~@/assets/stylus/variable'
@import '~@/assets/stylus/mixin'
.player
  .normal-player
    position: fixed
    top: 0
    right: 0
    bottom: 0
    left: 0
    z-index: 150
    background: $color-background
    .background
      position: absolute
      left: 0
      top: 0
      z-index: -1
      width: 100%
      height: 100%
      opacity: .6
      filter: blur(20px)
    .top
      position: relative
      margin-bottom: 25px
      .back
        position: absolute
        top: 0
        left: 6px
        z-index: 50
        .icon-back
          display: block
          padding: 9px
          font-size: $font-size-large-x
          color: $color-theme
          transform: rotate(-90deg)
      .title
        width: 70%
        margin: 0 auto
        line-height: 40px
        text-align: center
        no-wrap()
        font-size: $font-size-large
        color: $color-text
      .singer-name
        line-height: 20px
        text-align: center
        font-size: $font-size-medium
        color: $color-text
    .middle
      position: fixed
      top: 80px
      bottom: 170px
      width: 100%
      white-space: nowrap
      font-size: 0
      .middle-l
        display: inline-block
        vertical-align: top
        position: relative
        width: 100%
        height: 0
        padding-top: 80%
        .cd-wrapper
          position: absolute
          left: 10%
          top: 0
          width: 80%
          height: 100%
          .cd
            width: 100%
            height: 100%
            box-sizing: border-box
            border: 10px solid rgba(255, 255, 255, 0.1)
            border-radius: 50%
            &.play
              animation: rotate 20s linear infinite // CD 旋转
            &.pause
              animation-play-state: paused
            .singer-img
              position: absolute
              left: 0
              top: 0
              width: 100%
              height: 100%
              border-radius: 50%
        .playing-lyric-wrapper
          width: 80%
          margin: 30px auto 0 auto
          overflow: hidden
          text-align: center
          .playing-lyric
            height: 20px
            line-height: 20px
            font-size: $font-size-medium
            color: $color-text-l
      .middle-r
        display: inline-block
        vertical-align: top
        width: 100%
        height: 100%
        overflow: hidden
        .lyric-wrapper
          width: 80%
          margin: 0 auto
          overflow: hidden
          text-align: center
          .text
            line-height: 32px
            color: $color-text-l
            font-size: $font-size-medium
            &.current
              color: $color-text
    .bottom
      position: absolute
      bottom: 50px
      width: 100%
      .dot-wrapper
        text-align: center
        font-size: 0
        .dot
          display: inline-block
          vertical-align: middle
          margin: 0 4px
          width: 8px
          height: 8px
          border-radius: 50%
          background: $color-text-l
          &.active
            width: 20px
            border-radius: 5px
            background: $color-text-ll
      .progress-wrapper
        display: flex // flex布局
        align-items: center
        width: 80%
        margin: 0 auto
        padding: 10px 0
        .time
          color: $color-text
          font-size: $font-size-small
          flex: 0 0 30px
          line-height: 30px
          width: 30px
          &.time-l
            text-align: left
          &.time-r
            text-align: right
        .progress-bar-wrapper
          flex: 1
      .operators
        display: flex
        align-items: center
        .icon
          flex: 1
          color: $color-theme
          &.disable
            color: $color-theme-d
          i
            font-size: 30px
        .i-left
          text-align: right
        .i-center
          padding: 0 20px
          text-align: center
          i
            font-size: 40px
        .i-right
          text-align: left
        .icon-favorite
          color: $color-sub-theme
    &.normal-enter-active, &.normal-leave-active
      transition: all .4s
      .top, .bottom
        transition: all .4s cubic-bezier(.86, .18, .82, 1.32)
    &.normal-enter, &.normal-leave-to
      opacity: 0
      .top
        transform: translate3d(0, -100px, 0)
      .bottom
        transform: translate3d(0, 100px, 0)
  .mini-player
    display: flex
    align-items: center
    position: fixed
    left: 0
    bottom: 0
    z-index: 180
    width: 100%
    height: 60px
    background: $color-highlight-background
    &.mini-enter-active, &.mini-leave-active
      transition: all .4s
    &.mini-enter, &.mini-leave-to
      opacity: 0
    .icon
      flex: 0 0 40px
      width: 40px
      padding: 0 10px 0 20px
      img
        border-radius: 50%
        &.play
          animation: rotate 10s linear infinite
        &.pause
          animation-play-state: paused
    .text
      display: flex
      flex-direction: column
      justify-content: center
      flex: 1
      line-height: 20px
      overflow: hidden
      .name
        margin-bottom: 2px
        no-wrap()
        font-size: $font-size-medium
        color: $color-text
      .desc
        no-wrap()
        font-size: $font-size-small
        color: $color-text-d
    .control
      flex: 0 0 30px
      width: 30px
      padding: 0 10px
      .icon-play-mini, .icon-pause-mini, .icon-playlist
        font-size: 30px
        color: $color-theme-d
      .icon-mini
        font-size: 32px
        position: absolute
        left: 0
        top: 0
@keyframes rotate
  0%
    transform: rotate(0)
  100%
    transform: rotate(360deg)
</style>
